<template>
  <div>
    <h1>【aty-image】 component demo</h1>
    <p>【aty-image】 本质是一个div>img</p>

    <aty-title :level="4">1.【aty-image】 基础 </aty-title>
    <aty-row>
      <aty-col span="12">
        <aty-panel>图片加载成功</aty-panel>
        <aty-image
          src="/static/images/avatar.jpg"
          alt="图片加载失败显示alt属性"
          title="avatar 属性"
          @load="load"
          @click="click" />
      </aty-col>
      <aty-col span="12">
        <aty-panel>图片加载失败</aty-panel>
        <aty-image
          src="/static/images/avatar2.jpg"
          alt="图片加载失败显示alt属性"
          :width="100"
          :height="100" />
      </aty-col>

    </aty-row>

    <aty-title :level="4">2.【aty-image】 width  height属性 </aty-title>
    <aty-image src="/static/images/avatar.jpg"
               alt="图片加载失败显示alt属性"
               title="avatar 属性"
               @load="load"
               @click="click"
               :width="300"
               :height="300" />
    <aty-title :level="4">3.【aty-image】 是否显示边框 </aty-title>
    <aty-image src="/static/images/avatar.jpg"
               alt="图片加载失败显示alt属性"
               title="avatar 属性"
               @load="load"
               @click="click"
               :width="300"
               :height="300"
               border />

  </div>
</template>
<script>
export default {
  methods: {
    load () {
      console.log('图片加载成功')
    },
    click () {
      alert('你点击了图片')
    }

  }
  // components: { Alert, Icon }
}
</script>
